<template>
  <div style="display:flex;gap:12px">
      <div style="flex: 0 0 300px;">
        <a-space direction="vertical" style="width: 100%">
          <PmpItem :id="data.id"></PmpItem>
        </a-space>
      </div>

      <div style="flex: 1 1 auto">
        <a-tabs v-model:activeKey="activeKey">
          <a-tab-pane key="1">
            <template #tab>
              <span>
                <FileMarkdownOutlined />
                Information 
              </span>
            </template>
            <ItemDetailView :c="data.id"></ItemDetailView>
          </a-tab-pane>
          <a-tab-pane key="2">
            <template #tab>
              <span>
                <ProfileOutlined />
                Pmp Item
              </span>
            </template>
            <ProcessView
              :data="data"
              v-if="data.classify === 'PROCESS'"
            ></ProcessView>
            <ProcessGroupView
              :data="data"
              v-if="data.classify === 'PROCESS_GROUP'"
            ></ProcessGroupView>
            <KnowledgeAreaView
              :data="data"
              v-if="data.classify === 'KNOWLEDGE_AREA'"
            ></KnowledgeAreaView>

            <ProcessIoView
              :data="data"
              v-if="data.classify === 'IO'"
            ></ProcessIoView>

            <ProcessTechToolView
              :data="data"
              v-if="data.classify === 'TECH_TOOL'"
            ></ProcessTechToolView>

            <SubView :data="data" v-if="data.classify === 'SUB'"></SubView>

            <PerformanceDomainView :pmpItemId="data.id" v-if="data.classify === 'PERFORMANCE_DOMAIN'"></PerformanceDomainView>
          </a-tab-pane>
        </a-tabs>
      </div>
      <div style="flex: 0 0 200px;">
        <a-affix :offset-top="16">
        <ReferList :id="data.id"></ReferList>
        </a-affix>
      </div>
  </div>
</template>
<script setup>

import { FileMarkdownOutlined, ProfileOutlined } from '@ant-design/icons-vue';

import { ref } from "vue";
import PerformanceDomainView from "@/components/PerformanceDomainView.vue";
import ItemDetailView from "@/components/ItemDetailView.vue";
import ClassifyView from "@/components/ClassifyView.vue";
import ProcessView from "@/components/ProcessView.vue";
import ProcessIoView from "@/components/ProcessIoView.vue";
import ProcessTechToolView from "@/components/ProcessTechToolView.vue";
import ProcessGroupView from "@/components/ProcessGroupView.vue";
import KnowledgeAreaView from "@/components/KnowledgeAreaView.vue";
import SubView from "@/components/SubView.vue";
import ClassifyIcon from "@/components/ClassifyIcon.vue";
import CopyOutlined from "@ant-design/icons-vue/lib/icons/CopyOutlined";
import { messageApi } from "@/utils/MessageUtils";
import CONSTANTS from "@/constants/Constants.js";
import RelaList from "@/components/RelaList.vue";
import PmpItem from "@/components/PmpItem.vue";
import ReferList from "@/components/ReferList.vue";
const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
});

const activeKey = ref("1");
function copyToClipboard(text) {
  navigator.clipboard
    .writeText(text)
    .then(function () {
      console.log("Text copied to clipboard");
      messageApi.info("Text copied to clipboard");
    })
    .catch(function (err) {
      console.error("Failed to copy text: ", err);
    });
}
</script>
<style scoped></style>
